<template>
	<el-form
	  ref="ruleFormRef"
	  style="max-width: 96%"
	  :model="ruleForm"
	  :rules="rules"
	  label-width="auto"
	  class="demo-ruleForm"
	  :size="formSize"
	>
  <div class="supervisor-container">
	  <header class="title-section">
	      <img src="@/assets/jhk-1719213427217.jpg" alt="背景图片" class="image"/>
	      <h1>东软环保公众监督平台</h1>
	      <h2>———公众监督员端———</h2>
	  </header>
    <div class="supervisor-box">
      <h1>提交反馈信息</h1>
        <el-form-item label="所在省" prop="province">
          <el-select
            v-model="ruleForm.province"
            placeholder="请选择省"
            @change="handleProvinceChange"
          >
            <el-option
              v-for="province in provinces"
              :key="province.value"
              :label="province.label"
              :value="province.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在市" prop="city">
          <el-select
            v-model="ruleForm.city"
            placeholder="请选择市"
            :disabled="!cities.length"
          >
            <el-option
              v-for="(city,index) in cities"
              :key="city.value"
              :label="city.label"
              :value="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address" placeholder="具体地址" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" class="supervisor-button">
            下一步
          </el-button>
        </el-form-item>
    </div>
  </div>
  </el-form>
</template>

<script setup>

	import { reactive, ref, onMounted } from 'vue';
	import axios from 'axios';
	import { useRouter } from 'vue-router';
	import { ElMessage } from 'element-plus';
	
	// 定义响应式数据
  const ruleFormRef = ref()
	const formSize = ref('medium');
	const ruleForm = reactive({
	  province: '',
	  city: '',
	  address: ''
	});
	const rules = {
	  province: [{ required: true, message: '请选择省份', trigger: 'change' }],
	  city: [{ required: true, message: '请选择城市', trigger: 'change' }],
	  address: [{ required: true, message: '请输入具体地址', trigger: 'blur' }]
	};
	const provinces = ref([]);
	const cities = ref([]);
	const allCities = ref({});
	
	const router = useRouter();
	
	// 方法
	const loadProvinceCityData = async () => {
	  try {
	    const [provinceResponse, cityResponse] = await Promise.all([
	      axios.get('/province_object.json'),
	      axios.get('/city_object.json')
	    ]);
	
	    const provinceObject = provinceResponse.data;
	    const cityObject = cityResponse.data;
	
	    provinces.value = convertToProvinces(provinceObject);
	    allCities.value = convertToCities(cityObject);
	  } catch (error) {
	    console.error('加载省市数据失败:', error);
	  }
	};
	
	const convertToProvinces = (provinceObject) => {
	  return Object.keys(provinceObject).map((provinceId, index) => ({
	    value: index,
	    label: provinceObject[provinceId].name,
      provinceId : provinceId
	  }));
	};
	
	const convertToCities = (cityObject) => {
	  const cities = {};
	  Object.keys(cityObject).forEach((cityId,index) => {
	    const city = cityObject[cityId];
	    if (!cities[city.province]) {
	      cities[city.province] = [];
	    }
	    cities[city.province].push({
	      value: index,
	      label: city.name,
        cityId : cityId,
	    });
	  });
	  return cities;
	};
	
	const handleProvinceChange = (provinceIndex) => {
	  cities.value = allCities.value[provinces.value[provinceIndex].label] || [];
	};

  //对应下一步按钮
	const submitForm = () => {
		

	  ruleFormRef.value.validate((valid) => {
	          if (valid) {
	            //alert('表单已提交');
	            //这里添加提交逻辑
              ruleForm.province = provinces.value[ruleForm.province].provinceId
              ruleForm.city = cities.value[ruleForm.city].cityId
              router.push({
                path: 'SubmitFeedback2',
                query: { formData: JSON.stringify(ruleForm) }
              });
	          } else {
	            ElMessage.error('请完整填写条目！');
	            return false;
	          }
	        });
	};
	
	// 在组件挂载时加载数据
	onMounted(loadProvinceCityData);


</script>

<style scoped>
.supervisor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e0f7fa; /* 蓝绿色背景色 */
   min-height: 100vh;
}
.supervisor-box {
  border-radius: 8px;
}
.title-section {
  text-align: center;
  
}
.image {
    display: block;
    margin: auto;
	width: 100%;
    height: auto;
  }
.supervisor-button {
    background-color: #70b0bc; /* 蓝绿色按钮 */
    border-color: #00796b;
    width: 100%;
    height: 40px;
    border-radius: 8px;
	}
.supervisor-box .el-input,
.supervisor-box .el-select {
	background-color: #e0f7fa; /* 设置背景颜色为透明 */
  }
  
</style>
